
<template>
	<view class="content">
		<u-navbar :autoBack="true" bgColor="#242448" leftIconColor="#fff" placeholder @rightClick="rightClick">
			<view class="u-nav-slot" slot="center">
				<view class="s-item" :class="{active:active==1}" @click="clickBtn(1)">{{$t('yuce.zuqiu')}}</view>
				<view class="s-item" :class="{active:active==2}" @click="clickBtn(2)">{{$t('yuce.lanqiu')}}</view>
			</view>
			<view slot="right">
				<u-icon name="question-circle" color="#fff" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="cc">
			Note: This game is free to participate. The platform will collect statistics and rank the data.
		</view>
		<template v-for="(item,index) in list">
			<view class="title">{{item.time}}</view>
			<view class="item-row" v-for="(row,ri) in item.data" >
				<view class="i-left">
					<view>{{$u.timeFormat(row[1],'hh:MM') }}</view>
					<view :style="{color:row[2]}">{{row[3]}}</view>
				</view>
				<view class="i-center">
					<view class="c-row">
						<image class="image" :src="row[6]"></image>
						<text>{{row[4]}}</text>
					</view>
					<view class="c-row">
						<image class="image"  :src="row[7]"></image>
						<text>{{row[5]}}</text>
					</view>
				</view>
				<view class="i-right" @click="releaseForecast(row)">
					{{$t('yuce.fabuyuce')}}
				</view>
			</view>
		</template>
		
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		data() {
			return {
				active:1,
				list:[]
			}
		},
		onLoad() {
			this.matchLists()
		},
		methods:{
			//发布
			releaseForecast(row){
				uni.navigateTo({
					url: `/pages/releaseForecast/releaseForecast?matchId=${row[0]}&type=${this.active}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//规则
			rightClick(){
				uni.navigateTo({
					url: '/pages/userAgreement/userAgreement?text=赛事推荐规则&type=4',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickBtn(index){
				this.active=index
				this.matchLists()
			},
			//推荐赛事列表
			matchLists(){
				let params={
					matchType:this.active
				}
				uni.$u.http.get(this.api.api_v1_recommend_matchLists, {params:params}).then(res => {
					if(res.code==200&&res.data){
						// this.list=res.data
						//处理数据
						this.handle(res.data)
					}else{
						this.list=[]
					}
				})
			},
			//处理数据
			handle(data){
				let arr = []
				let key = []
				data.forEach(item=>{
					let dataString = this.formatDate(item[1])
					let obj={
						time:dataString,
						data:[item]
					}
					
					if(key.includes(dataString)){
						arr = arr.map(dd=>{
							if(dd.time==dataString){
								dd.data.push(item)
							}
							return dd
						})
					}else{
						key.push(dataString)
						arr.push(obj)
					}
					
				})
				this.list = arr
			},
			formatDate(timestamp) {
				const date = new Date(timestamp*1000);
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const monthDays = [
					'01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'
				];
				// return `${weekDays[date.getDay()]} ${monthDays[date.getMonth()]}/${date.getDate()}`;
				return `${monthDays[date.getMonth()]}/${date.getDate()}`;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot{
		display: flex;font-size: 14px;
		.s-item{
			padding: 5px 15px;margin-right: 10px;border-radius: 15px;
		}
		.active{
			background-color: #c72d5e;
		}
	}
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;
		.cc{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;font-size: 14px;line-height: 18px;
		}
		.title{
			text-align: center;height: 40px;line-height: 40px;font-size: 14px;
		}
		.item-row{
			width: 100%;background-color: #242448;padding:15px 10px;box-sizing: border-box;border-radius: 5px;font-size: 14px;
			display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;
			.i-left{
				width: 150rpx;line-height: 18px;font-size: 14px;
			}
			.i-center{
				width: 500rpx;
				.c-row{
					display: flex;align-items: center;height:28px;
					.image{
						width: 20px;height: 20px;margin-right: 10px;
					}
				}
			}
			.i-right{
				width: 100px;height: 30px;border-radius: 15px;font-size: 14px;text-align: center;background-color: #c72d5e;line-height: 30px;
			}
		}
		
	}
</style>
